<template>
	<view class="detail_index">
		<view class="image_container">
			<image
				src="https://img0.baidu.com/it/u=3992780575,2211628595&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1715792400&t=ecad36d8e13c6f840ec61afd89ca7beb"
				mode=""></image>
		</view>
		<u-cell-group title="活动内容">
			<u-cell title="品牌方" :value="info.brand"></u-cell>
			<u-cell title="标题" :value="info.title"></u-cell>
			<u-cell title="简介" :value="info.content"></u-cell>
		</u-cell-group>
		<u-cell-group title="活动时间">
			<u-cell title="起始时间" :value="info.startTime"></u-cell>
			<u-cell title="结束时间" :value="info.endTime"></u-cell>
		</u-cell-group>
		<u-cell-group title="人数">
			<u-cell title="当前报名人数" :value="info.numbers"></u-cell>
			<u-cell title="所需人数" :value="info.numberControl"></u-cell>
		</u-cell-group>
		<template v-if="info.numbers>=info.numberControl">
			<view class="tips">
				报名人数已达到上限
			</view>
		</template>
		<template v-else>
			<u-button :type="info.isJoined?'primary':'success'"
				@click="handleClick">{{info.isJoined?'取消报名':'立即报名'}}</u-button>
		</template>
	</view>
</template>

<script>
	import {
		getActivityById,
		joinActivity
	} from '@/api/forum.js'
	export default {
		onLoad({
			id
		}) {
			getActivityById(id).then(res => {
				this.info = res.data
			})
		},
		data() {
			return {
				info: {}
			}
		},
		methods: {
			handleClick() {
				joinActivity(this.info.id, this.info.isJoined).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '报名成功'
						})
						uni.navigateBack(-1)
						uni.$emit('reloadlist')
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail_index {
		width: 100%;
		margin: 0 auto;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 300rpx;
		}

		.tips {
			padding: 10rpx 20rpx;
			text-align: center;
			background-color: #00007f;
			color: #fff;
		}
	}
</style>